<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>6.路由</title>
</head>
<body>
  路由两种模式: 1.hash 2.H5 history模式

  <!-- 1.hash路由特点 -->
  1.hash变化会触发网页跳转，即浏览器的前进或者后退
  2.hash变换不会刷新页面，SPA必须的特点
  3.hash永远不会提交到server端（前端自生自灭）

  <!-- 2.H5 history特点 -->
  用url规范的路由，但是跳转是不刷新页面
  history.pushState 
  window.onpopstate


  总结：
  hash模式 -- window.onhashchange监听
  H5 history -- history.pushState和window.onpopstate 
  H5 history需要后端支持
  
  <p>hash test</p>
  <button id="btn1">修改url</button>

  <script>
    // hash变化包括
    // 1.JS修改url
    // 2.手动修改url的hash
    // 3.浏览器前进，后退
/* 
    window.onhashchange = function(event) {
      console.log('old url', event.oldURL);
      console.log('new url', event.newURL);

      console.log('hash', location.hash);
    }

    //  页面初次加载，获取hash
    document.addEventListener('DOMContentLoaded', function() {
      console.log('hash:', location.hash);
    })

    // js修改url
    const btn1 = document.getElementById('btn1')
    btn1.addEventListener('click', function() {
      location.href = '#/user'
    })
     */

    //  H5 history模式

    // 页面初次加载获取path
    document.addEventListener('DOMContentLoaded', function() {
      console.log('load', location.pathname);
    })

    // 打开一个新路由
    // 注意：用pushState方式，浏览器不会刷新页面
    document.getElementById('btn1').addEventListener('click', function() {
      const state = {name: 'page1'}
      console.log('路由切换到 page1');
      history.pushState(state, '', 'page1') // 重要
    })

    // 监听浏览器前进，后退
    window.onpopstate = (event) => {
      console.log('onpopstate', event.state, location.pathname);
    }



  </script>
</body>
</html>